<template>
  <div class="w content">
  <el-row :gutter="10">
   <el-col :span="16">
     <video :src="BASE_URL + url"
            style="width:100%;height: 450px;"
            autoplay
            controls/>
   </el-col>
    <el-col :span="8">
      <el-card style="background-color: #0f1827;border: #0f1827;max-height: 450px;">
        <el-scrollbar height="100%">
        <div style="overflow: hidden">
          <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
          <div style="float: left;margin-left: 10px">
            <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">其他</span>
          </div>
        </div>
        <div style="margin-top: 10px">
          <el-scrollbar height="400px">
            <div style="width: 98%">
              <el-row :gutter="10">
                <el-col :span="24" style="margin-top: 10px;"
                        @click="changeVideoUrl(item.videoUrl)"
                        :title=" item.title"
                        v-for="item in homePreviewData">
                  <el-row >
                    <el-col :span="15">
                      <div style="position: relative">
                        <el-image :src="BASE_URL + item.thumbnail"
                                  style="width: 200px;height: 115px;"
                                  alt="Film poster"/>
                        <div class="mask"></div>
                        <div class="mask-text">
                          <p>{{ item.minute }} : {{ item.second }}</p>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="9">
                      <div style="	width: 100%;
                            overflow: hidden;text-overflow: ellipsis;	display: -webkit-box;
	                              	-webkit-line-clamp: 1;	-webkit-box-orient: vertical;">
                        <p style="font-weight: bold;line-height: 115px;color: #FFFFFF;margin: 0;">{{ item.title }}</p>
                      </div>

                    </el-col>
                  </el-row>

                </el-col>
              </el-row>
            </div>
          </el-scrollbar>
        </div>
        </el-scrollbar>
      </el-card>
    </el-col>
  </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

let filmId = new URLSearchParams(window.location.search).get('filmId');
const url = ref('');
const homePreviewData = ref([]);
const search = () => {
  axios.get(BASE_URL + '/v1/preview/selectByFilmId/'+ filmId)
    .then((response) => {
      if (response.data.code === 2000) {
        url.value = response.data.data[0].videoUrl;
        homePreviewData.value = response.data.data;
      } else {
        ElMessage({
          message: response.data.msg,
          type: 'error',
          showClose: true,
          center: true,
        });
      }
    });
}
onMounted(() => {
  search();
})
const changeVideoUrl = (videoUrl) => {
  url.value = videoUrl;
}

</script>

<style scoped>
.mask {
  width: 200px;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(360deg, #0f1827 10%, rgba(15, 24, 39, 0) 70%);
}

.mask-text {
  position: absolute;
  bottom: 0;
  right: 20px;
  z-index: 2;
  color: #fff;
}

</style>